<template>
  <div class="main">
    <el-container>
      <!-- <el-header></el-header> -->
      <el-aside width='16%'>
        <div><a href="#" class="myButton">{{itemData.orgtype}}</a></div>
        <div><a href="#" class="BButton">机构信息</a></div>
        <div><a href="#" class="BButton">对接成果</a></div>
        <div><a href="#" class="BButton">对接需求</a></div>
      </el-aside>
      <el-main>
        <el-row>
          <el-col :span='3'><img src="../../assets/industry_default.png" alt="default" style="width:100px;height:100px"></el-col>
          <el-col :span='17' :offset="1"><span style="font-weight:700;font-size:18px">{{itemData.orgname}}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span='12'>联系人：{{itemData.orgcontacts}}</el-col>
          <el-col :span='12'>联系方式：{{itemData.orgcontact_information}}</el-col>
        </el-row>
        <el-row>
          <el-col :span='12'>电子邮箱：{{itemData.orgemail}}</el-col>
          <el-col :span='12'>手机：{{itemData.orgphone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span='12'>通信地址 ：{{itemData.orgaddress}}</el-col>
          <el-col :span='12'>机构网站 ： {{itemData.orgweb}}</el-col>
        </el-row>
        <el-row><el-col>机构属性 ：{{itemData.orgtype}}</el-col></el-row>
        <el-row><el-col>重点学科 ：{{itemData.orgsubject}}</el-col></el-row>
        <el-row><el-col>重点研究领域 ：{{itemData.orgkey_research_field}}</el-col></el-row>
        <el-row><el-col>机构简介 ：</el-col></el-row>
        <div class="content" >
          <span v-html="itemData.orgintroduction"></span>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'IndustryDetailTp',
  data() {
    return{
      itemData: '',

    }
  },
  created() {
    this.itemData = JSON.parse(this.$route.query.item);
    // console.log(this.itemData);
  },
}
</script>

<style scoped>
.main{
  width:1140px;
  margin: auto;
  font-size: 14px;
}
.myButton {
  width: 124px;
  height: 54px;
	box-shadow: 0px 10px 14px -7px #276873;
	background:linear-gradient(to bottom, #599bb3 5%, #b0eaf5 100%);
	background-color:#a0bac4;
	border-radius:4px;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
  margin: 20px 3px 8px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myButton:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.myButton:active {
	position:relative;
	top:1px;
}
.el-main{
  margin: 0px;
  color: rgb(21, 146, 184);
}
.el-aside{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.el-row{
  display: flex;
  align-items: center;
  margin: 20px;
}
.el-col{
  display: flex;
}
.BButton {
	box-shadow: 0px 10px 14px -7px #276873;
	background:linear-gradient(to bottom, #f0fbff 5%, #408c99 100%);
	background-color:#f0fbff;
	border-radius:4px;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:20px;
	font-weight:300;
	padding:11px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
  margin: 3px;
}
.BButton:hover {
	background:linear-gradient(to bottom, #408c99 5%, #f0fbff 100%);
	background-color:#408c99;
}
.BButton:active {
	position:relative;
	top:1px;
}

.content{
  margin: auto;
  border: thin solid skyblue;
  min-height: 200px;
  margin: 20px;
  padding: 20px;
}
</style>